<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>生命周期钩子函数综合应用<</title>
    <script src="vue.js"></script>
</head>
<body>
    <div id="app">
        <h3>{{ message }}</h3>
        <input type=" button" @click="change" value="修改数据" />
        <input type=" button" @click="destroy" value="销毁实例" />
    </div>
    <script type="text/javascript">
        const appCom = {
            data(){
                return{
                    message:"hello world"
                }
            },
            methods:{
                change(){
                    this.message = 'hello vue';
                },
                destroy(){
                    app.unmount();
                }
            },
            beforeCreate(){
                console.group('= = = = = =beforeCreate= = = = = =');
                console.log("el:" + this.$el + ",data:"+ this.$data);
                console.log("message:"+ this.information);
                console.groupEnd('= = = = = =beforeCreate = = = = = = ' );
            },
            created(){
                console.group('= = = = = =created= = = = = =');
                console.log("el:" + this.$el + ",data:"+ this.$data);
                console.log("message:"+ this.information);
                console.groupEnd('= = = = = =created = = = = = = ' );
            },
            beforeMount(){
                console.group('= = = = = =beforeMount = = = = = =');
                console.log("el:" + (this.$el));
                console.log(this.$el);               
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =beforeMount = = = = = =' );
            },
            mounted(){
                console.group('= = = = = =mounted = = = = = =');
                console.log("el:" + this.$el);
                console.log(this.$el);               
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =mounted = = = = = =' );
            },
            beforeUpdate(){
                console.group('= = = = = =beforeUpdate= = = = = =');
                console.log( "el:" + this.$el);
                console.log(this.$el) ;
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =beforeUpdate= = = = = =');
            },
            updated(){
                console.group('= = = = = =updated= = = = = =');
                console.log( "el:" + this.$el);
                console.log(this.$el) ;
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =updated= = = = = =');
            },
            beforeUnmount(){
                console.group('= = = = = =beforeDestroy= = = = = =');
                console.log("el:" + this.$el);
                console.log(this.$el);               
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =beforeDestroy= = = = = =' );
            },
            unmounted(){
                console.group('= = = = = =destroyed= = = = = =');
                console.log("el:" + this.$el);
                console.log(this.$el);               
                console.log("data:" + this.$data);
                console.log("message:" + this.message);
                console.groupEnd('= = = = = =destroyed= = = = = =' );
            }
        };
        const app = Vue.createApp(appcom).mount("#app");
    </script>
</body>
</html>